<template>
  <div id="my">
    <div class="header">
      <div class="left">
        <div class="avatar">
          <img :src="avatar" alt />
        </div>
        <span @click="$router.push('login')" v-if="!jsonData.user_id" class="go-login">登录/注册</span>
        <div v-else class="user-info">
          <span
            class="ellipsis"
            style="
              font-size: 0.375rem;
              line-height: 0.6rem;
              margin-bottom: 0.12rem;
            "
          >{{ jsonData.user_name }}</span>
          <span class="ellipsis">
            {{
            jsonData.sign ? jsonData.sign : "还没写下签名"
            }}
          </span>
        </div>
      </div>
      <div class="right" v-if="jsonData.user_name" @click="viewUserInfo">
        <span>个人信息</span>
        <span class="icon-more"></span>
      </div>
    </div>
    <div class="content">
      <div class="list">
        <div class="item" @click="viewMyOrder">
          我的订单
          <span class="icon-more"></span>
        </div>
        <div class="item" @click="viewMyMovie(1)">
          收藏的电影
          <span class="icon-more"></span>
        </div>
        <div class="item" @click="viewMyMovie(0)">
          评价的电影
          <span class="icon-more"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from '../../api/index'
import { Indicator } from 'mint-ui'
export default {
  name: 'My',
  data() {
    return {
      jsonData: {},
      avatar: 'http://localhost:3001/images/avatar/userIcon.png',
    }
  },
  created() {
    this.loadUserInfo()
  },
  methods: {
    //用户头像
    userAvatar() {
      if (this.jsonData) {
        this.avatar = this.$server + this.jsonData.avatar
      } else {
        this.avatar = 'http://localhost:3001/images/avatar/userIcon.png'
      }
    },
    //加载用户信息
    async loadUserInfo() {
      if (this.$cookies.get('user_id')) {
        Indicator.open('Loading...')
        let json = await getUserInfo(this.$cookies.get('user_id'))
        if (json.success_code === 200) {
          this.jsonData = json.data
          this.userAvatar()
        } else {
          this.jsonData = {}
        }
        Indicator.close()
      } else {
        this.jsonData = {}
        Indicator.close()
      }
    },
    //查看个人信息
    viewUserInfo() {
      if (this.$cookies.get('user_id')) {
        this.$router.push('my_info')
      }
    },
    //查看个人订单
    viewMyOrder(flag) {
      if (this.$cookies.get('user_id')) {
        this.$router.push({
          path: 'my_order',
          query: { user_id: this.$cookies.get('user_id') },
        })
      } else {
        this.$router.push('login')
      }
    },
    //查看个人电影
    viewMyMovie(flag) {
      if (this.$cookies.get('user_id')) {
        this.$router.push({
          path: 'my_movie',
          query: { user_id: this.$cookies.get('user_id'), wish_movie: flag },
        })
      } else {
        this.$router.push('login')
      }
    },
  },
}
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
#my {
  width: 100%;
  height: 100%;

  .header {
    font-size: 0.3125rem;
    font-weight: bolder;
    height: 2.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1e88e5;
    color: #fff;
    position: relative;

    .left {
      width: 4rem;
      height: 2rem;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 0.4rem;

      .avatar {
        position: absolute;
        box-sizing: border-box;
        border: 0.08rem solid #f1f1f1;
        left: 0;
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 50%;
        overflow: hidden;
        font-size: 0;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .go-login {
        position: absolute;
        left: 2rem;
      }

      .user-info {
        width: 100%;
        position: absolute;
        left: 2rem;
        display: flex;
        flex-flow: column;

        span:last-child {
          font-size: 0.25rem;
        }
      }
    }

    .right {
      display: flex;
      font-weight: lighter;
      justify-content: center;
      align-items: center;
      font-size: 0.24rem;
      width: 1.2rem;
      height: 0.4rem;
      padding: 0 0.2rem;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 0.2rem 0 0 0.2rem;
    }
  }

  .content {
    border-top: 0.4rem solid #f1f1f1;
    font-size: 0.3125rem;
    position: fixed;
    top: 2.8rem;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #f1f1f1;

    .list {
      background-color: #fff;

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.3rem;
        font-size: 0.3125rem;
        border-bottom: 0.12rem solid #f1f1f1;
      }

      .icon-more {
        font-weight: 700;
      }
    }
  }
}
</style>
